<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="10" class="mb8" type="flex" justify="space-between" style="margin-bottom: 20px">
        <el-col :span="6"><span style="font-size: large">快速查询</span></el-col>
      </el-row>
      <!-- 表单操作项:查询/重置按钮 -->
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="110px">
        <el-form-item label="单据号">
          <el-input v-model="queryParams.billsID" placeholder="请输入单据号" clearable></el-input>
        </el-form-item>
        <el-form-item label="药品名称">
          <el-input v-model="queryParams.drugName" placeholder="请输入药品名称" clearable></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 45px">
          <el-button type="primary" icon="el-icon-search" @click="queryFinishedProductsList">查询</el-button>
          <el-button type="danger" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格部分 -->
    <el-card class="mt20">
      <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
        <el-col :span="6"><span style="font-size: large">收货列表</span></el-col>
      </el-row>
      <el-table :data="headerList" border class="mt20" height="calc(100vh - 320px)">
        <!-- 单据明细 -->
        <el-table-column type="expand" width="40">
          <template #default="{ row }">
            <div style="padding: 0 50px 20px 50px">
              <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
                <el-col :span="6"><span style="font-size: large">收货</span></el-col>
              </el-row>
              <!-- 修改此处的数据绑定，使用 row.billsDetail 获取对应明细数据 -->
              <el-table :data="row.billsDetail" border>
                <el-table-column show-overflow-tooltip type="index" label="行号" align="center"></el-table-column>
                <el-table-column show-overflow-tooltip prop="drugId" label="药品编码" align="center" width="150"/>
                <el-table-column show-overflow-tooltip prop="drugName" label="药品名称" align="center" width="300"/>
                <el-table-column show-overflow-tooltip prop="drugBatchNo" label="批号" align="center" width="120"/>
                <el-table-column show-overflow-tooltip prop="drugGG" label="规格" align="center" width="180"/>
                <el-table-column show-overflow-tooltip prop="drugDW" label="单位" align="center" width="80"/>
                <el-table-column show-overflow-tooltip prop="drugCD" label="生产厂家" align="center" width="300"/>
                <el-table-column show-overflow-tooltip prop="drugPD" label="生产日期" align="center" width="100"/>
                <el-table-column show-overflow-tooltip prop="drugExp" label="有效期" align="center" width="100"/>
                <el-table-column show-overflow-tooltip prop="drugCheckNum" label="实收数量" align="center" width="80"/>
                <el-table-column show-overflow-tooltip prop="drugNum" label="应收数量" align="center" width="80"/>
                <el-table-column label="操作" align="center" width="100">
                  <template #default="{ row:detail }">
                    <el-button size="mini" type="primary" @click="detailLook(detail,row)">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="billsId" label="单据号" align="center" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="checkDate" label="确认时间" align="center" width="160"></el-table-column>
        <el-table-column show-overflow-tooltip prop="customerName" label="往来单位" align="center" width="300"></el-table-column>
        <el-table-column show-overflow-tooltip prop="receiver" label="接收人" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="sendType" label="运输方式" align="center"></el-table-column>
      </el-table>
      <div class="block" style="float: right; margin: 20px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                       :page-sizes="[20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
      <el-dialog title="收货操作记录" :visible="visibleDetial" width="65%" @close="handleCloseDetail">
          <el-table :data="tableList" border>
            <el-table-column show-overflow-tooltip prop="DrugID" label="药品编码" align="center" width="120"></el-table-column>
            <el-table-column show-overflow-tooltip prop="DrugName" label="药品名称" align="center" ></el-table-column>
            <el-table-column show-overflow-tooltip prop="price" label="单价" align="center" width="80"/>
            <el-table-column show-overflow-tooltip prop="totalPrice" label="金额" align="center" width="80"/>
            <el-table-column show-overflow-tooltip prop="NewPrice" label="价格新值" align="center" width="80"></el-table-column>
            <el-table-column show-overflow-tooltip prop="OldPrice" label="价格旧值" align="center" width="80"></el-table-column>
            <el-table-column show-overflow-tooltip prop="OperationNum" label="修改数量" align="center" width="100"></el-table-column>
            <el-table-column show-overflow-tooltip prop="OperationTypeName" label="操作类型" align="center" width="170"></el-table-column>
            <el-table-column show-overflow-tooltip prop="OperateTime" label="操作时间" align="center" ></el-table-column>
            <el-table-column show-overflow-tooltip prop="Operator" label="操作人" align="center" width="100"></el-table-column>
            <el-table-column show-overflow-tooltip prop="Remark" label="备注" align="center" ></el-table-column>
          </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCloseDetail">关闭</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  queryWmsReceived,//已经收货列表
  queryWmsReceiptLog,//详情
} from '@/api/storeM/yxl.js'
export default {
  data() {
    return {
      pageNum: 1, // 当前页
      pageSize:20, // 每页显示条数
      total: 0, // 总条目数，需从后端返回
      headerList: [],
      queryParams: {
        billsID: '',
        drugName: '',
      },
      tableList:[],//操作记录
      visibleDetial:false
    };
  },
  created() {
    this.queryFinishedProductsList();
  },
  methods: {
    //打开详情
    handleCloseDetail(){
      this.visibleDetial = false;
    },
    //查看详情
    detailLook(detail,row) {
      queryWmsReceiptLog({billsID:row.billsId,drugId:detail.drugId}).then(res=>{
        this.visibleDetial = true;
        this.tableList = res.data;
      })
    },
    //获取的单据
    queryFinishedProductsList() {
      let params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        ...this.queryParams
      }
      queryWmsReceived(params).then(res => {
        this.headerList = res.data.rows;
        this.total = res.data.total;
      })
    },
    // 页大小变化
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.pageNum = 1; // 重置为第一页
      this.queryFinishedProductsList(); // 重新查询
    },

    // 当前页变化
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.queryFinishedProductsList(); // 重新查询
    },

    /**
     * 重置表单操作
     * 将所有查询条件还原为初始状态
     */
    resetQuery() {
      this.queryParams = {
        billsID: '',
        drugName: '',
      };
      this.queryFinishedProductsList();
    },
  },
};
</script>

<style scoped>
/* 主容器样式：设置内边距，避免紧贴页面边缘 */
.app-container {
  padding: 20px;
}

/* 卡片样式：为每个表单块设置外边距，提升视觉效果 */
.el-card {
  margin-bottom: 20px;
}

.btn el-button {
  margin-bottom: 20px;
}
</style>
